<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../../css/person/person.css">
    <!-- 宠物秀需要的相册js -->
    <link rel="stylesheet" href="../../css/person/images/animate.css">
    <link rel="stylesheet" href="../../css/person/images/blueimp-gallery.min.css">
    <link rel="stylesheet" href="../../css/person/images/font-awesome.css">


</head>

<body>
    <!--导航-->
    <div class="container-fluid">
        <!-- 使页面铺满整个屏幕 -->
        <div class="row">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-brand" style="margin-left:10px">
                        <img src="img" href="#"></a>
                    </div>
                    <div class="navbar-brand" style="margin-left:10px">
                        <form class="form-horizontal" role="form">
                            <div class="form-group has-feedback">
                                <div class="modal-md">
                                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                                    <input id="search" type="text" class="form-control input-lg" placeholder="搜'柴犬'试试">
                                </div>
                            </div>
                        </form>
                    </div>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="pure-menu-selected"><a href="../index.html" class="mynav-underline-active"><b>首页</b></a></li>
                        <li><a href="#" class="nav-underline"><b>论坛</b></a></li>
                        <li><a href="#" class="nav-underline"><b>宠物动态</b></a></li>
                        <li><a href="#" class="nav-underline"><b>二手市场</b></a></li>
                        <li><a href="#" class="nav-underline"><b>趣味专区</b></a></li>
                        <li><a href="#" class="nav-underline"><b>消息中心</b></a></li>
                        <li><a href="person.html" class="nav-underline"><b>我的</b></a></li>

                    </ul>
                </div>
            </nav>

        </div>
    </div>


    <!-- 主体部分 -->
    <div class="container">
        <div class="zt-header">
            <div class="zt-headerimg">
                <img src="../../imgs/person/tx.jpg" style="height: 160px;widows: 160px" class="zt-tx">
            </div>
        </div>
        <div class="zt-xheader">
            <span>如我西沉</span>
            <button type="button" class="btn btn-default" data-toggle="button" style="margin-left: 400px" onclick="window.location.href='data.html'"> 添加宠物
            </button>
            <button type="button" class="btn btn-default" data-toggle="button" onclick="window.location.href='data.html'"> 个人资料
            </button>
            <button type="button" class="btn btn-default" data-toggle="button"> 我的草稿
            </button>
            <br>
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                <span class="glyphicon glyphicon-chevron-down" style="line-height: 40px;">&nbsp;更多资料信息</span></a>
            <div id="collapseThree" class="panel-collapse collapse">
                <table width="400">
                    <tr>
                        <td>所在地</td>
                        <td>苏州&nbsp;工业园区</td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>女</td>
                    </tr>
                    <tr>
                        <td>注册时间</td>
                        <td>2012.08.18&nbsp;14:52:23</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>


    <div class="container" style="width: 1015px">
        <div class="pet-list">
            <span>我的宠物:</span>
            <ul>
                <li>
                    <img src="../../imgs/person/tx.jpg" alt="">
                    <span style="color: #999;
                        font-size: 12px;">小虎</span>

                </li>
                <li>
                    <img src="../../imgs/person/tx.jpg" alt="">
                    <span style="color: #999;
                        font-size: 12px;">小虎</span>
                </li>
            </ul>
        </div>

        <div class="col-md-9" style="margin-top: 20px;background-color: #fff;margin-bottom: 5px;">
            <p class="ztx1 zactive" id="post">帖子</p>
            <p class="ztx1" id="petshow">宠物秀</p>
            <p class="ztx1" id="dynamic">动态</p>
            <p class="ztx1" id="security" onclick="window.location.href='safety.html'">账号与安全</p>

            <!-- 帖子模块 -->
            <div id="module1">
                <div class="xztleft">
                    <a href="#" class="xztlefta" style="margin-top: 10px">关于癌症和安乐</a>
                    <br>
                    <br>
                </div>
                <a href="#" class="xztlefta1" style="color: #999;">
                    没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>

                <p style="margin-top: 4px;line-height: 12px;">
                    <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                    <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                    <span class="glyphicon glyphicon-comment" style="color: #999;">
                        评论
                    </span>
                    <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                    <span
                        style="margin-left: 425px;font-size: 13px;color: #999;text-align: right">2019.05.06&nbsp;15:14:05</span>
                </p>
                <hr class="hrLine" style="width:100%;" />

                <div class="xztleft">
                    <a href="#" class="xztlefta">关于癌症和安乐</a>

                    <!-- <br> -->
                    <br>
                    <br>
                </div>
                <a href="#" class="xztlefta1" style="color: #999;">
                    没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>

                <p style="margin-top: 4px;line-height: 12px;">
                    <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                    <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                    <span class="glyphicon glyphicon-comment" style="color: #999;">
                        评论
                    </span>
                    <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                    <span
                        style="margin-left: 425px;font-size: 13px;color: #999;text-align: right">2019.05.06&nbsp;15:14:05</span>
                </p>
                <hr class="hrLine" style="width:100%;" />



                <div class="xztleft">
                    <a href="#" class="xztlefta">关于癌症和安乐</a>

                    <!-- <br> -->
                    <br>
                    <br>
                </div>
                <a href="#" class="xztlefta1" style="color: #999;">
                    没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>

                <p style="margin-top: 4px;line-height: 12px;">
                    <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                    <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                    <span class="glyphicon glyphicon-comment" style="color: #999;">
                        评论
                    </span>
                    <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                    <span
                        style="margin-left: 425px;font-size: 13px;color: #999;text-align: right">2019.05.06&nbsp;15:14:05</span>
                </p>
                <hr class="hrLine" style="width:100%;" />




                <div class="xztleft">
                    <a href="#" class="xztlefta">关于癌症和安乐</a>

                    <!-- <br> -->
                    <br>
                    <br>
                </div>
                <a href="#" class="xztlefta1" style="color: #999;">
                    没想到过了这么多年再回来就是这么沉重的话题说一下现在的情况，2个月前乳腺瘤切除，但肿瘤转移到了肺部，上周拍片显示肺部一大半都已有阴影，按医生的说法，肿瘤发展的很快，只能吃药拖时间，再不行就带去打一针。上周末开始吃药，之后的几天看上去好像有一...</a>
                <p style="margin-top: 4px;line-height: 12px;">
                    <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                    <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                    <span class="glyphicon glyphicon-comment" style="color: #999;">
                        评论
                    </span>
                    <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                    <span
                        style="margin-left: 425px;font-size: 13px;color: #999;text-align: right">2019.05.06&nbsp;15:14:05</span>
                </p>
                <hr class="hrLine" style="width:100%;" />
            </div>

            <!-- 动态 -->
            <div id="module3" style="display: none">
                <div style="line-height: 30px;">
                    <i class="pets">回复了帖子</i>
                    <span class="petsp">2018-06-22 22:56:24</span><br>
                    <i class="pets" style="color: #333">回复内容:</i><br>
                    <i class="pets" style="color: #333">狗狗超级可爱</i><br>
                    <div class="inpost">
                        <span class="insp">糯叮随记-最美星溪线徒步详细攻略！</span>
                    </div>

                    <p style="margin-top: 4px;line-height: 12px;padding-left: 5px">
                        <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                        <span class="glyphicon glyphicon-comment" style="color: #999;">评论
                        </span>
                        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                    </p>
                    <hr class="hrLine" style="width:100%;" />
                </div>


                <div style="line-height: 30px;">
                    <i class="pets">回复了帖子</i>
                    <span class="petsp">2018-06-22 22:56:24</span><br>
                    <i class="pets" style="color: #333">回复内容:</i><br>
                    <i class="pets" style="color: #333">狗狗超级可爱</i><br>
                    <div class="inpost">
                        <span class="insp">糯叮随记-最美星溪线徒步详细攻略！</span>
                    </div>

                    <p style="margin-top: 4px;line-height: 12px;padding-left: 5px">
                        <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                        <span class="glyphicon glyphicon-comment" style="color: #999;">评论
                        </span>
                        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                    </p>
                    <hr class="hrLine" style="width:100%;" />
                </div>

                <div style="line-height: 30px;">
                    <i class="pets">回复了帖子</i>
                    <span class="petsp">2018-06-22 22:56:24</span><br>
                    <i class="pets" style="color: #333">回复内容:</i><br>
                    <i class="pets" style="color: #333">狗狗超级可爱</i><br>
                    <div class="inpost">
                        <span class="insp">糯叮随记-最美星溪线徒步详细攻略！</span>
                    </div>

                    <p style="margin-top: 4px;line-height: 12px;padding-left: 5px">
                        <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                        <span class="glyphicon glyphicon-comment" style="color: #999;">评论
                        </span>
                        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                    </p>
                    <hr class="hrLine" style="width:100%;" />
                </div>
            </div>

            <!-- 动态 -->
            <div id="module2" style="display: none">
                <div>
                    <i class="pets" style="color: #333">最新动态</i>
                    <div class="lightBoxGallery">
                        <a href="../../imgs/index/1.jpg" title="图片" data-gallery=""><img
                                src="../../imgs/index/1.jpg"></a>
                        <a href="../../imgs/index/1.jpg" title="图片" data-gallery=""><img
                                src="../../imgs/index/1.jpg"></a>
                        <p style="margin-top: 4px;line-height: 12px;margin-left: 5px">
                            <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                            <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                            <span class="glyphicon glyphicon-comment" style="color: #999;">
                                评论
                            </span>
                            <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                            <span
                                style="margin-left: 415px;font-size: 13px;color: #999;text-align: right">2019.05.06&nbsp;15:14:05</span>
                        </p>
                    </div>
                </div>
                <hr>
                <div>
                    <i class="pets" style="color: #333">最新动态</i>
                    <div>
                        <video width="100%" height="10%" controls>
                            <source src="vedio/录屏_20181028_162858.mp4" type="video/mp4">
                        </video>
                        <p style="margin-top: 4px;line-height: 12px;margin-left: 5px">
                            <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                            <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                            <span class="glyphicon glyphicon-comment" style="color: #999;">
                                评论
                            </span>
                            <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                            <span
                                style="margin-left: 415px;font-size: 13px;color: #999;text-align: right">2019.05.06&nbsp;15:14:05</span>
                        </p>
                    </div>
                </div>
                <hr>

                <div>
                    <i class="pets" style="color: #333">最新动态</i>
                    <div class="lightBoxGallery">
                        <a href="../../imgs/index/1.jpg" title="图片" data-gallery=""><img
                                src="../../imgs/index/1.jpg"></a>
                        <a href="../../imgs/index/1.jpg" title="图片" data-gallery=""><img
                                src="../../imgs/index/1.jpg"></a>
                        <p style="margin-top: 4px;line-height: 12px;margin-left: 5px">
                            <span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>
                            <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>
                            <span class="glyphicon glyphicon-comment" style="color: #999;">
                                评论
                            </span>
                            <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>
                            <span
                                style="margin-left: 415px;font-size: 13px;color: #999;text-align: right">2019.05.06&nbsp;15:14:05</span>
                        </p>
                    </div>
                </div>
                <hr>





                <div id="blueimp-gallery" class="blueimp-gallery">
                    <div class="slides"></div>
                    <h3 class="title"></h3>
                    <a class="prev">‹</a>
                    <a class="next">›</a>
                    <a class="close">×</a>
                    <a class="play-pause"></a>
                    <ol class="indicator"></ol>
                </div>
            </div>



            <div class="page">
                <a href="#" class="prev">&lt;</a>
                <a href="#" class="active">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <a href="#" class="next">&gt;</a>
            </div>
        </div>

        <!-- 右边 -->

        <div class="col-md-3 " style="margin-top: 20px;">
            <div class="card" style="background-color: #fff;">
                我的成就
            </div>

            <div style="padding: 12px 0; color: #646464;background-color: #fff;">
                <div style="padding: 6px 20px;">
                    <span class="glyphicon glyphicon-thumbs-up">
                        获得了2888个赞
                    </span>
                </div>
                <div style="padding: 6px 20px;">
                    <span class="glyphicon glyphicon-comment">
                        获得了26个评论
                    </span>
                </div>
            </div>

            <div class="card" style="align-items:unset;padding-left: 0px;">
                <div style="display: flex;padding: 12px 0;">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" style="width: 110px;height:85px" onclick="window.location.href='focuson.html'">
                            关注了289人
                        </button>
                        <button class="btn btn-default" type="button" style="width: 110px;height:85px" onclick="window.location.href='focuson.html'">
                            粉丝500人
                        </button>
                    </span>

                </div>
            </div>
            <div style="background-color: #fff;margin-top: 58px">
                <a href="#" class="list-group-item">积分</a>
                <a href="#" class="list-group-item">收藏</a>
                <a href="#" class="list-group-item">发布</a>
            </div>

        </div>
    </div>

    </div>


    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>

    <script src="../../js/person/person.js"></script>

    <!-- 宠物秀需要引入的js -->
    <script src="../../js/person/images/jquery.blueimp-gallery.min.js"></script>


    <script>
        $(document).ready(function () {
            $("#search").focus(function () {
                $(this).css("padding-right", "200.5px")
            });
            $("#search").blur(function () {
                $(this).css("padding-right", "42.5px")
            });
        });

    </script>
</body>

</html>